<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">

<h:head>
	<title>Tienda</title>
</h:head>
<h:body>
	<p:growl id="growl" showDetail="true" life="5000" />
	
	
	<h:outputText value="#{managedBeanUsuario.messageLogin}"  />
	<h:outputText value=" Si ya se encuentra registrado haga click aqui: " rendered="#{managedBeanUsuario.messageLogin == 'Usted No está logeado.'}"/>
	<h:outputLink id="loginLink"
		onclick="PF('dlg').show()" title="login">
		<p:commandButton icon="ui-icon-person" rendered="#{managedBeanUsuario.messageLogin == 'Usted No está logeado.'}"
			action="#{managedBeanUsuario.limpiarCampos()}"
			update=":form-login:username :form-login:pass"
			/>
	</h:outputLink>
		
	<h:form id="form-login">
		<p:dialog id="dialog" header="Login" widgetVar="dlg" resizable="false">

			<h:panelGrid columns="2" cellpadding="5">
				<h:outputLabel value="Nombre de Usuario:" />
				<p:inputText id="username" value="#{managedBeanUsuario.username}"
					required="true" label="username" />

				<h:outputLabel value="Contraseña:" />
				<h:inputSecret id="pass" value="#{managedBeanUsuario.password}"
					required="true" label="password" />

				<f:facet name="footer">
					<p:commandButton id="loginButton" value="Login" action="#{managedBeanUsuario.login()}" ajax="false"/>  
				</f:facet>
			</h:panelGrid>

		</p:dialog>
	</h:form>
	
	<h:form>
	<p:commandButton value="Cerrar Sesion" icon="ui-icon-person" action="#{managedBeanUsuario.logout()}" 
				rendered="#{managedBeanUsuario.messageLogin != 'Usted No está logeado.'}"
				ajax="false" />  
	</h:form>
	  
	<h:outputText id="message-registro" value="Si NO está Registrado, puede Registrase " 
		rendered="#{managedBeanUsuario.messageLogin == 'Usted No está logeado.'}"/>
	<p:commandButton id="boton-registro" value="Aquí" onclick="PF('dlg-registro').show()"
		action="#{managedBeanUsuario.limpiarCampos()}"
		update=":Registro"
		rendered="#{managedBeanUsuario.messageLogin == 'Usted No está logeado.'}"/>  
          
	<p:dialog header="Ingrese sus Datos" widgetVar="dlg-registro" resizable="false">  
	    <h:form id="Registro">  
	  
	        <h:panelGrid columns="2" style="margin-bottom:10px">  
	            <h:outputLabel for="nombre" value="Nombre de Usuario: " />  
	            <p:inputText id="nombre" value="#{managedBeanUsuario.username}" required="true" pt:placeholder="Ej: Juan2014">  
	                <f:validateLength minimum="1" maximum="25" />  
	                <p:clientValidator />  
	            </p:inputText>  
	            
	             <h:outputLabel for="password" value="Password: " />  
	            <p:inputText id="password" value="#{managedBeanUsuario.password}" required="true" pt:placeholder="Ej: m1a2r3t4e5s6">  
	                <f:validateLength minimum="1" maximum="25" />  
	                <p:clientValidator />  
	            </p:inputText>  
			    
			     <h:outputLabel for="nombre_personal" value="Nombre :" />  
	            <p:inputText id="nombre_personal" value="#{managedBeanUsuario.nombre}" required="true" pt:placeholder="Ej: Juan2014">  
	                <f:validateLength minimum="1" maximum="25" />  
	                <p:clientValidator />  
	            </p:inputText>  
			    
			     <h:outputLabel for="apellido" value="Apellido: " />  
	            <p:inputText id="apellido" value="#{managedBeanUsuario.apellido}" required="true" pt:placeholder="Ej: Juan2014">  
	                <f:validateLength minimum="1" maximum="25" />  
	                <p:clientValidator />  
	            </p:inputText>  
	              
	        </h:panelGrid>  
	        <p:commandButton value="Registrarse" action="#{managedBeanUsuario.registro()}" update=":growl" oncomplete="PF('dlg-registro').hide();" validateClient="true"/>  
	              
	    </h:form>  
	</p:dialog>  
	
	<h1>
		<p align="center">Tienda</p>
	</h1>

	<p:panel header="Productos en la Tienda">
		<h:outputText id="carrito" value="#{managedBeanTienda.messageCarrito}" />
		<h:form id="form-carrito">
			<h:outputText id="carritoTotal" value="Total: #{managedBeanTienda.obtenerTotal()}" rendered="#{managedBeanTienda.messageCarrito != 'Carrito Vacio'}" />
			<br/>
			<h:commandButton id="irAcarrito" value="Ir al Carrito"
				icon="ui-icon-cart"
				action="#{managedBeanTienda.irAdetalleCarrito()}"
				rendered="#{managedBeanTienda.messageCarrito != 'Carrito Vacio'}" />
		</h:form>
	</p:panel>

	<h:form id="form-prod">
		<p:growl id="growl-prod" showDetail="true" life="5000" />
		<p:dataTable value="#{managedBeanTienda.productosDisp}" var="producto"
			border="1" emptyMessage="No Se Han Encontrado Productos Disponibles" >
			   
			<f:facet name="header">
					<h:outputText value="Registros por pagina: " />
					<p:selectOneMenu value="#{managedBeanTienda.cantRegistros}">  
						<f:selectItem itemLabel="Seleccione uno" itemValue="#{managedBeanTienda.cantRegistros}" />  
			            <f:selectItem itemLabel="5   " itemValue="5"/>  
			            <f:selectItem itemLabel="10  " itemValue="10"/>  
		            	<f:selectItem itemLabel="15  " itemValue="15"/>  
		            	<p:ajax update=":form-prod"  
					                        listener="#{managedBeanTienda.init()}" />  
	       			 </p:selectOneMenu> 
			</f:facet>
			<p:column>
				<f:facet name="header">
					<h:commandLink value="Producto" action="#{managedBeanTienda.ordenarLista('nombre')}"/>
				</f:facet>
				<h:outputText value="#{producto.nombre}"/>
			</p:column>

			<p:column>
				<f:facet name="header">
					<h:commandLink value="Precio" action="#{managedBeanTienda.ordenarLista('precio')}"/>
				</f:facet>
				$ <h:outputText value="#{producto.precio}" >
						<f:convertNumber pattern="###,###,###"/>
				</h:outputText>
				
			</p:column>

			<p:column>
				<f:facet name="header">
					<h:outputText value="Cantidad en Stock" />
				</f:facet>
				<h:outputText value="#{producto.cantidad}" />
			</p:column>

			<p:column>
				<f:facet name="header">
					<h:outputText value="Añadir al Carrito" />
				</f:facet>
				<p:commandButton id="agregar" icon="ui-icon-cart"
					action="#{managedBeanTienda.agregarProductoAlCarrito(producto.codProducto, producto.nombre)}" update=":carrito :form-prod:growl-prod :form-carrito" />
			</p:column>
			
			<f:facet name="footer"> 
				<p:commandButton value="Anterior" icon="ui-icon-circle-arrow-w" action="#{managedBeanTienda.paginaAnt()}" update=":form-prod"
						rendered="#{managedBeanTienda.primeraPag != 'true'}" />
				Pagina: #{managedBeanTienda.pagina}
				<p:commandButton value="Siguiente" icon="ui-icon-circle-arrow-e" action="#{managedBeanTienda.paginaSig()}" update=":form-prod"
						rendered="#{managedBeanTienda.ultimaPag != 'true'}"/>
			</f:facet>
			
		</p:dataTable>
	</h:form>
</h:body>
</html>